<template>
  <list-layout>
    <div slot="search">
      <el-form :model="queryParams" :inline="true" ref="queryForm" size="small" :rules="rules" label-width="88px">

        <!--            抽样方案-->
        <el-form-item :label="$t('inventoryManagement.samplingScheme')" prop="planName">
          <el-select v-model="queryParams.planName" @change="changePlanName"
                     :placeholder="$t('public.inputPl')+'抽样方案'" disabled>
            <el-option v-for="item in dict.type.NYIQC_CE_TYPE" :key="item.value" :label="item.label"
                       :value="item.label">
            </el-option>
            <el-option v-for="item in samplingOption" :key="item.planName" :label="item.planName"
                       :value="item.planName">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item prop="planType" v-if="queryParams.planName!=='C=0' && !disabledDivision">
          <el-select v-model="queryParams.planType" size="small" @change="$forceUpdate()"
                     :placeholder="$t('public.inputPl')+'方案类型'">
            <el-option v-for="item in dict.type.NYIQC_CE_CLASS" :key="item.label" :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
        <!-- 策略类型 -->
        <!--  Add that Show 策略类型 when the plan name is '金刚线特殊方案'  -->
        <el-form-item v-if="queryParams.planName!=='C=0'" :label="$t('transferRules.tacticsType')" prop="sampTactics">
          <el-select v-model="queryParams.sampTactics" size="small" @change="$forceUpdate()"
                     :placeholder="$t('public.inputPl')+'当前策略'">
            <el-option v-for="item in dict.type.NYIQC_CE_STRATEGY" :key="item.label" :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 事业部 新增 -->
        <el-form-item :label="$t('inspectionStandards.division')" prop="divisionId">
          <el-select v-model="queryParams" size="small" disabled>
            <el-option :key="queryParams.divisionName" :label="queryParams.divisionName"
                       :value="queryParams.divisionId">
            </el-option>
          </el-select>
        </el-form-item>
        <!--            项目类型：-->
        <el-form-item :label="$t('basicData.projectType')" prop="projectType">
          <el-select v-model="queryParams.projectType" filterable size="small" reserve-keyword :placeholder="$t('public.inputPl')+$t('basicData.projectType')">
            <el-option v-for="item in dict.type.NYIQC_PROJECT_TYPE" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="right-btns">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('public.query') }}
          </el-button>
          <el-button icon="el-icon-refresh" class="resectBtn" size="mini" @click="resetQuery">{{ $t('public.reset') }}
          </el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="app-container">
      <div class="container-header">
        <div class="header-left">
          {{ $t('inventoryManagement.samplingScheme') }}
        </div>
        <div class="maxMinVal">{{ $t('ncr.min') }}：0 {{ $t('ncr.max') }}：NA</div>
      </div>

      <div class="container-table mt10">
        <el-form ref="formTable" :rules="rulesForm" :model="formTable">
          <!-- <el-table :key="tableKey" border stripe v-loading="loading" :data="formTable.typeList" @selection-change="handleSelectionChange">
              <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />

              <el-table-column label="批量范围" prop="scope" align="center" width="200">
                  <template slot-scope="scope">
                      <el-form-item>
                          <el-row :gutter=" 5">
                              <el-col :span="12">
                                  <el-input v-model="scope.row.scopeMin" size="small" />
                              </el-col>
                              <el-col :span="12">
                                  <el-input v-model="scope.row.scopeMax" size="small" />
                              </el-col>
                          </el-row>
                      </el-form-item>
                  </template>
              </el-table-column>

              <el-table-column v-for="item in columnList" :label="item.label" :key="item.key" min-width="100" max-width="130" align="center" :prop="item.key">
                  <template slot-scope="scope">
                      <el-form-item :prop="'typeList.' + scope.$index + '.'+item.key" :rules="itemRules(scope.row,scope.$index)">
                          <el-input v-model="scope.row[item.key]" size="small" />
                      </el-form-item>
                  </template>
              </el-table-column>
              <el-table-column :label="$t('public.opera')" align="center" width="100">
                  <template slot-scope="scope">
                      <el-form-item>
                          <div class="action-wrap">
                              <table-body-btn type="gwSubmit" v-hasPermi="['ny-iqc:samplingPlan:save']" :name="$t('public.save')" @click.native="handleRowSave(scope.row)" />
                              <table-body-btn type="gwdelete" v-hasPermi="['ny-iqc:samplingPlan:remove']" :name="$t('public.delete')" @click.native="handleDelete(scope.row,scope.$index)" />
                          </div>
                      </el-form-item>

                  </template>
              </el-table-column>

          </el-table> -->
          <el-table :height="tableHeight" :key="tableKey" border stripe v-loading="loading" :data="formTable.typeList"
                    @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" /> -->

            <el-table-column :label="$t('inventoryManagement.BatchRange')" fixed="left" prop="scope" align="center"
                             width="180">
              <template slot-scope="scope">
                <el-row :gutter="5">
                  <el-col :span="12">
                    <el-input v-model="scope.row.scopeMin"

                              @blur="changeScop(scope,1,scope.row.scopeMin)" size="small"/>
                  </el-col>
                  <el-col :span="12">
                    <el-input v-model="scope.row.scopeMax"

                              @blur="changeScop(scope,1,scope.row.scopeMax)" size="small"/>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column :label="$t('basicData.flawType')" fixed="left" prop="flawLevel"
                             width="105" align="center"
                             v-if="queryParams.planName==='GB/T2828.1-2012' || disabledDivision">
              <template slot-scope="scope">
                <el-input v-model="scope.row.flawLevel" @blur="changeScop(scope,2)" size="small" disabled/>
              </template>
            </el-table-column>

            <el-table-column v-for="(item,index) in dict.type.NYIQC_CE_GB2828"
                             v-if="queryParams.planName==='GB/T2828.1-2012' || disabledDivision" :label="item.label"
                             :key="index" min-width="100" max-width="130" align="center" :prop="item.key">
              <el-table-column label="Ac" prop="flawLevel" width="66" align="center"
                               v-if="queryParams.planName!=='C=0'">
                <template slot-scope="scope">
                  <span v-if="!scope.row.map[item.value]"></span>
                  <el-input v-else v-model="scope.row.map[item.value].samAc"
                            @input="(val)=>{scope.row.map[item.value].samAc = val.replace(/[^\d]/g, '')}"
                            @change="(e)=>changeAql(e,'samAc',scope.row.map[item.value].samAql,scope.row.scopeMark,scope)"
                            size="small"/>
                </template>
              </el-table-column>
              <el-table-column label="Re" prop="flawLevel" width="66" align="center"
                               v-if="queryParams.planName!=='C=0'">
                <template slot-scope="scope">
                  <span v-if="!scope.row.map[item.value]"></span>
                  <el-input v-else v-model="scope.row.map[item.value].samRe"
                            @input="(val)=>{scope.row.map[item.value].samRe = val.replace(/[^\d]/g, '')}"
                            @change="(e)=>changeAql(e,'samRe',scope.row.map[item.value].samAql,scope.row.scopeMark,scope)"
                            size="small"/>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column :label="$t('public.opera')" align="center" width="100">
              <template slot-scope="scope">
                <div class="action-wrap">
                  <!-- <table-body-btn type="gwSubmit" v-hasPermi="['ny-iqc:samplingPlan:save']" :name="$t('public.save')" @click.native="handleRowSave(scope.row)" /> -->
                  <table-body-btn type="gwdelete" v-hasPermi="['ny-iqc:samplingPlan:remove']"
                                  :name="$t('public.delete')" @click.native="handleDelete(scope.row,scope.$index)"/>
                </div>
              </template>
            </el-table-column>

          </el-table>

        </el-form>
        <div class="add-line" @click="addLine" v-hasPermi="['ny-iqc:samplingPlan:add']"><i class="el-icon-circle-plus"
                                                                                           plain></i>{{
            $t('public.add')
          }}
        </div>
        <!-- <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" /> -->
      </div>
      <div style="color:#FC8675;margin-top: 20px;height: 100px;font-size: 12px;">
        <div style="float:left;margin-left:5px;">
          {{ $t('inventoryManagement.annotation') }}:
        </div>
        <div style="float:left;margin-left:5px">
          {{ $t('inventoryManagement.annotationContent1') }}<br/>
          {{ $t('inventoryManagement.annotationContent2') }}
        </div>

      </div>
      <!-- 新增|编辑｜查看 弹框 -->
      <!--      <mtool-detail :visible.sync="visible" v-model="form" :type="dialogType" @refresh="getList()"></mtool-detail>-->

    </div>
  </list-layout>
</template>
<script>
import {refreshCache,} from '@/api/basic/dict/type'
import {listALLLocation,} from '@/api/basic/location'
import {listALLFactory} from '@/api/basic/factory'
import {
  addSamplingPlan,
  deleteSamplingPlan2,
  editAql,
  editScop,
  samplingPlanList,
} from '@/api/inspectionManagement/inspectionManagement'

import DivisionDialog from '@/views/components/DivisionDialog';

export default {
  name: 'samplingPlan',
  components: {
    DivisionDialog
  },
  dicts: [
    'NYIQC_CE_TYPE',
    'NYIQC_CE_CLASS',
    'NYIQC_CE_GB2828',
    'NYIQC_CE_C',
    'NYIQC_CE_GB2828_2008',
    'NYIQC_CE_STRATEGY',
    'NYIQC_PROJECT_TYPE',
  ],
  computed: {
    showStrategy() {
      const show = this.queryParams.planName.includes('金刚线')
      return show;
    },
    columnList() {
      return this.dialogForm.planName == 'C=0'
          ? this.column2
          : this.column1
    },
  },
  data() {
    return {
      tableHeight: 'auto',
      dialogType: 1, //1:新增  2：编辑 3：查看
      dialogForm: {},
      rulesForm: {},
      locationOptions: [],
      direction: 'rtl',
      tableKey: 0,
      addInspection: false,
      visible: false,
      drawer: false,
      approvalOpen: false,
      viewModel: {
        inspectionInformation: '0',
      },
      editModel: {
        inspectionInformation: '0',
      },
      approvalForm: {
        status: '1',
        textarea: '',
      },
      rules: {
        planName: [
          {
            required: true,
            message: '抽样方案不能为空',
            trigger: 'blur',
          },
        ],
        planType: [
          {
            required: true,
            message: '方案类型不能为空',
            trigger: 'blur',
          },
        ],
      },
      selBtn: 1,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      formTable: {
        typeList: [],
      },
      typeList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        planName: 'GB/T2828.1-2012',
        planType: '1',
        sampTactics: "1",
        sampType: "1",
        divisionId: "1677861382642470913",
        divisionName: "组件事业部",
        projectType:"理化指标"
      },
      counter: undefined,
      column1: [
        {label: 'S-1', key: 'gb1'},
        {label: 'S-2', key: 'gb2'},
        {label: 'S-3', key: 'gb3'},
        {label: 'S-4', key: 'gb4'},
        {label: 'I', key: 'gb5'},
        {label: 'II', key: 'gb6'},
        {label: 'III', key: 'gb7'},
      ],
      column2: [
        {label: '0.01', key: 'c1'},
        {label: '0.015', key: 'c2'},
        {label: '0.025', key: 'c3'},
        {label: '0.04', key: 'c4'},
        {label: '0.065', key: 'c5'},
        {label: '0.1', key: 'c6'},
        {label: '0.15', key: 'c7'},
        {label: '0.25', key: 'c8'},
        {label: '0.4', key: 'c9'},
        {label: '0.65', key: 'c10'},
        {label: '1', key: 'c11'},
        {label: '1.5', key: 'c12'},
        {label: '2.5', key: 'c13'},
        {label: '4', key: 'c14'},
        {label: '6.5', key: 'c15'},
        {label: '10', key: 'c16'},
      ],
      // 表单参数
      form: undefined,
      exportLoading: false,
      fullscreen: false,
      divisionId: "",
      divisionName: '',
      samplingOption: [],
      disabledDivision: false
    }
  },

  created() {
    this.getList()
  },
  mounted() {
    this.$nextTick(() => {
      let header, bottom, outer
      header = document.getElementsByClassName('container-header')[0].scrollHeight
      bottom = 100
      outer = document.getElementsByClassName('el-main content-style')[0].scrollHeight
      this.tableHeight = outer - header - bottom - 90
    })
  },
  methods: {
    changePlanName(e) {
      if (e === 'C=0') {
        this.queryParams.planType = undefined
        this.queryParams.sampTactics = undefined
        this.disabledDivision = false
      } else if (e === 'GB/T2828.1-2012') {
        this.queryParams.planType = '1'
        this.queryParams.sampTactics = '1'
        this.disabledDivision = false
      } else {
        this.queryParams.planType = null
        var item = this.samplingOption.find(item => item.planName == e)

        this.queryParams.divisionId = item.divisionId;
        this.queryParams.divisionName = item.divisionName;

        // const show=e.includes('金刚线')
        this.queryParams.sampTactics = "1"
        this.disabledDivision = true
      }

      this.handleQuery()
    },
    changePlanName2(item) {


      this.disabledDivision = true
      this.handleQuery()
    },
    changeAql(e, attr, samAql, scopeMark, scope) {
      this.queryParams.flawLevel = scope.row.flawLevel
      if (e && attr == 'samplingAmount') {
        if (!(/^(?:[1-9]\d*|\*)$/).test(e)) {
          this.$message.error('请输入正整数或 * 号');
          return
        }
      }

      editAql({
        ...this.queryParams,
        [attr]: e,
        samAql,
        scopeMark,
        isCustom: this.disabledDivision ? "1" : null
      }).then((response) => {
        // if (response.code === 200) {
        //     this.getList()
        // }
      })
    },
    changeScop(scope, num, e) {
      if (num == 1 && e) {
        if (!(/^(?:[0-9]\d*|\*)$/).test(e) && e != 'NA') {
          this.$message.error('请输入整数，最小值：0 最大值：NA');
          return
        }
      }
      if (this.queryParams.planName === 'C=0') {
        if (
            this.formTable.typeList[scope.$index].scopeMin &&
            this.formTable.typeList[scope.$index].scopeMax
        ) {
          editScop({
            ...this.queryParams,
            scopeMark:
            this.formTable.typeList[scope.$index].scopeMark,
            scopeMin:
            this.formTable.typeList[scope.$index].scopeMin,
            scopeMax:
            this.formTable.typeList[scope.$index].scopeMax,
            isCustom: this.disabledDivision ? "1" : null
          }).then((response) => {
            if (response.code === 200) {
              this.getList()
            }
          })
        }
      }

      if (this.queryParams.planName === 'GB/T2828.2-2008') {
        if (
            this.formTable.typeList[scope.$index].scopeMin &&
            this.formTable.typeList[scope.$index].scopeMax
        ) {
          editScop({
            ...this.queryParams,
            scopeMark:
            this.formTable.typeList[scope.$index].scopeMark,
            scopeMin:
            this.formTable.typeList[scope.$index].scopeMin,
            scopeMax:
            this.formTable.typeList[scope.$index].scopeMax,
            isCustom: this.disabledDivision ? "1" : null
          }).then((response) => {
            if (response.code === 200) {
              this.getList()
            }
          })
        }
      }
      if (this.queryParams.planName === 'GB/T2828.1-2012' || this.disabledDivision) {
        if (
            this.formTable.typeList[scope.$index].scopeMin &&
            this.formTable.typeList[scope.$index].scopeMax &&
            this.formTable.typeList[scope.$index].flawLevel
        ) {
          editScop({
            ...this.queryParams,
            scopeMark:
            this.formTable.typeList[scope.$index].scopeMark,
            scopeMin:
            this.formTable.typeList[scope.$index].scopeMin,
            scopeMax:
            this.formTable.typeList[scope.$index].scopeMax,
            isCustom: this.disabledDivision ? "1" : null
          }).then((response) => {
            if (response.code === 200) {
              this.getList()
            }
          })
        }
      }
    },
    itemRules(row, index) {
      return [
        {
          require: true,
          validator: (rule, value, callback) => {
            let reg = /^([0-9]|[*])([0-9])*$/
            console.log(reg.test(value))
            if (
                value === '' ||
                value === null ||
                value === undefined
            ) {
              callback()
            }
            if (!reg.test(value)) {
              return callback(new Error('输入数字或*'))
            }
            callback()
          },
          trigger: 'change',
        },
      ]
    },
    handleRowSave(e) {
      const self = this
      if (e.scopeMin && e.scopeMax) {
        if (Number(e.scopeMin) >= Number(e.scopeMax)) {
          this.$modal.msgWarning('批量范围后面的值要大于前面的值!')
          return
        } else {
          this.counter = setTimeout(function () {
            const column = self.columnList.map((i) => {
              if (e[i.key]) {
                return true
              } else {
                return false
              }
            })
            const res = column.join('||')
            if (e.scopeMax || e.scopeMin || eval(res)) {
              delete e.type
              addSamplingPlan({...e, ...self.queryParams}).then(
                  (res) => {
                    if (res.code == 200) {
                      self.$modal.msgSuccess('保存成功!')
                      self.getList()
                    }
                  }
              )
            }
          }, 500)
        }
      }
    },
    addLine() {
      if (this.queryParams.projectType === undefined) {
        this.$modal.msgWarning('请选择项目类型')
        return;
      }
      this.formTable.typeList.push({
        scope: undefined,
        scopeMin: undefined,
        scopeMax: undefined,
        flawLevel: 'CR',
        map: {},
      },{
        scope: undefined,
        scopeMin: undefined,
        scopeMax: undefined,
        flawLevel: 'MA',
        map: {},
      },{
        scope: undefined,
        scopeMin: undefined,
        scopeMax: undefined,
        flawLevel: 'MI',
        map: {},
      })
    },
    drawerClose() {
      this.drawer = false
    },

    getList() {
      this.loading = true
      // divisionList({divisionName: this.$store.getters.deptName}).then((response) => {
      //   if (response.rows) {
      //     this.queryParams.divisionName = response.rows[0]?.divisionName ? response.rows[0]?.divisionName : this.queryParams.divisionName
      //     this.queryParams.divisionId = response.rows[0]?.divisionId ? response.rows[0]?.divisionId : this.queryParams.divisionId
      samplingPlanList(this.queryParams).then((response) => {
        this.loading = false
        if (response.code == 200 && response) {
          // this.formTable.typeList = response.data
          var tempTypeList=[]
          response.data.forEach(item=>{
            let itemCR = { ...item };
            itemCR.flawLevel = 'CR';
            itemCR.map = {};
            tempTypeList.push(itemCR);

            let itemMA = { ...item };
            itemMA.flawLevel = 'MA';
            itemMA.map = {};
            tempTypeList.push(itemMA);

            let itemMI = { ...item };
            itemMI.flawLevel = 'MI';
            itemMI.map = {};
            tempTypeList.push(itemMI);
            const map = item.map;
            for (const key in item.map) {
              if (item.map.hasOwnProperty(key)) {
                const i = map[key];
                let fw = key.split(",")[0];
                let scopeMin = fw.split("-")[0];
                let scopeMax = fw.split("-")[1];
                let flawLevel = key.split(",")[1];
                let value = key.split(",")[2];
                for (let j = 0; j < tempTypeList.length; j++) {
                  if (tempTypeList[j].scopeMax===scopeMax&&
                      tempTypeList[j].scopeMin===scopeMin&&
                      tempTypeList[j].flawLevel===flawLevel){
                    tempTypeList[j].map[value] = i;
                  }
                }
              }
            }
          })
          this.formTable.typeList = tempTypeList
        }
        this.tableKey++
      })
      // }
      // })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: '0',
        remark: undefined,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // console.log('queryParams.planName,',this.queryParams.planName,this.queryParams.planName=='金刚线特殊方案');


      this.queryParams.pageNum = 1
      this.dialogForm = {...this.queryParams}
      this.getList()


    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.projectType = ''
      this.queryParams.pageNum = 1
      this.queryParams.planType = '1';
      this.queryParams.planName = 'GB/T2828.1-2012';
      this.queryParams.sampTactics = '1';
      this.disabledDivision = false

      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {}
      this.dialogType = 1
      this.visible = true
    },
    handleApproval() {
      if (this.ids.length === 0) {
        this.$modal.msgWarning(
            this.$t('inspectionManagement.pleaseSelectOne')
        )
        return
      }
      this.handleDelete()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      // this.single = selection.length!=1
      // this.multiple = !selection.length
    },

    locationRemoteMethod(e) {
      listALLLocation({locationName: e}).then((res) => {
        this.locationOptions = res.data
      })
    },
    handleLocationChange(e) {
      this.queryParams.locationName = e.join(',')
    },
    handleGaugeTypeChange(e) {
      this.queryParams.gaugeType = e.join(',')
    },
    /** 删除按钮操作 */
    handleDelete(row, index) {
      if (
          row.scopeMark === '' ||
          row.scopeMark === null ||
          row.scopeMark === undefined
      ) {
        this.formTable.typeList.splice(index, 1)
        return
      }
      deleteSamplingPlan2(row.scopeMark).then((response) => {
        if (response.code === 200) {
          this.getList()
        }
      })
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.dialogType = 3
      this.form = row
      this.visible = true
    },
    /** 编辑按钮操作 */
    handleEdit(row) {
      this.dialogType = 2
      this.form = row
      this.visible = true
    },
    /** 关闭抽屉操作 */
    handleClose(row) {
      this.drawer = false
    },
    /** 导出按钮操作 */
    handleExport() {
      // const queryParams = this.queryParams
      // this.$modal.confirm(this.$t('Location.export')).then(() => {
      //   this.exportLoading = true
      //   return exportLocation(queryParams)
      // }).then(response => {
      //   this.$download.name(response.msg)
      //   this.exportLoading = false
      // }).catch(() => {})
      this.download(
          'masterdata/location/export',
          {
            ...this.queryParams,
          },
          `location_${new Date().getTime()}.xlsx`
      )
    },
    /** 刷新缓存按钮操作 */
    handleRefreshCache() {
      refreshCache().then(() => {
        this.$modal.msgSuccess('刷新成功')
      })
    },
    //工厂模糊查询
    factoryRemoteMethod(val, cb) {
      listALLFactory({factoryName: val}).then((res) => {
        this.factoryOptions = res.data.map((i) => i.deviceName)
        cb(res.data)
      })
    },
    handleFactorySelect(e) {
      this.queryParams.factoryName = e.factoryName
    },
    handleFactoryBlur(e) {
      const {factoryOptions, queryParams} = this
      if (!factoryOptions.includes(queryParams.factoryName)) {
        this.queryParams.factoryName = ''
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
  padding-top: 20px;
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding-bottom: 20px;
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  overflow: auto;
}

::v-deep .el-aside {
  padding: 0;
  margin-bottom: 0;
}

.content-style {
  border: 0px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  background-color: white;
  margin-top: 10px;
}

::v-deep .el-button-group .selBtn {
  background: #fff;
  border: 1px solid #0b7be3;
  color: #0b7be3;
}

::v-deep .el-button-group .unselBtn {
  background: #fff;
  border: 1px solid #ededf2;
  color: #666666;
}

.header-left {
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  padding: 3px 0 10px;
  display: inline-flex;
  justify-content: center;
  border-bottom: 2px solid #0b7be3;
}

.header-right {
  float: right;
}

.container-header {
  border-bottom: 1px solid #ededf2;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .maxMinVal {
    font-size: 12px;
  }
}

.container-table {

  //margin-top:6px;
  width: 100%;
}

.mb8 {
  float: left;
  margin-top: 6px;
  width: 100%;
}

.drawer-footer {
  display: flex;
  position: relative;
  z-index: 9999;
  bottom: -40px;
  height: 40px;
  justify-content: center;
  width: 100%;
}

.drawer-close {
  background: #f7f8fa;
  border-color: #f7f8fa;
}

.right-btns ::v-deep .el-button {
  margin-top: 0;
}

.app-container {
  padding: 0;
}

.table-action-wrap {
  padding: 12px 0;
}

.add-line {
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  line-height: 35px;
  border: 1px solid #e3e8ee;
  border-top: 0;
  color: #666;
}

.add-line i {
  margin-right: 5px;
  color: #4b94ef;
}
</style>
<style>
/* ::-webkit-scrollbar {
    width: 118px;
    height: 108px !important;
}

::-webkit-scrollbar-thumb {
    background-color: aqua;
    border-radius: 4px;

} */
</style>
